<template>
  <div class="max">
    <my-header :backBtn="true">
      <div
        slot="title"
        v-html="access == 'kinsfolk' ? '宝宝相册' : '视频监控'"
      ></div>
      <div slot="right" v-if="access == 'kinsfolk'">
        <router-link :to="'/video-feedback'"> 反馈 </router-link>
      </div>
    </my-header>
<!--    <div class="cont-nof">-->
<!--      <div class="camera-menus fl">-->
<!--        <div class="max oa" style="background: #ffffff">-->
<!--          <div-->
<!--            class="c-menu-item"-->
<!--            v-for="(item, index) in gradeList"-->
<!--            :key="index"-->
<!--            @click="selectMenu(index, item.id)"-->
<!--            :class="{ active: index === active }"-->
<!--          >-->
<!--            {{ item.name }}-->
<!--          </div>-->
<!--          <div-->
<!--            class="c-menu-item"-->
<!--            @click="selectMenu(-1, -1)"-->
<!--            :class="{ active: -1 === active }"-->
<!--          >-->
<!--            其他-->
<!--          </div>-->
<!--        </div>-->
<!--      </div>-->
<!--      <div class="camera-list fr tl oa" ref="camera_list">-->
<!--        <template v-if="list.length == 0"> 该区域暂无摄像头 </template>-->
<!--        <div class="list-class">-->
<!--          <div class="list-item flex">-->
<!--            <div-->
<!--              v-for="(item, index) in list"-->
<!--              :key="index"-->
<!--              style="margin-bottom: 10px"-->
<!--              @click="jump(item)"-->
<!--            >-->
<!--              <div class="item-img">-->
<!--                <img :src="item.frontCover" alt="" width="100%" height="100%" />-->
<!--              </div>-->
<!--              {{ item.name }}-->
<!--            </div>-->
<!--          </div>-->
<!--          <div-->
<!--            class="loadMore"-->
<!--            @click="loadmore"-->
<!--            v-if="params.size < params.total"-->
<!--          >-->
<!--            点击加载更多-->
<!--          </div>-->
<!--          <div class="loadMore" v-else>没有更多数据了</div>-->
<!--        </div>-->
<!--      </div>-->
<!--    </div>-->
    <div></div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      gradeList: [],
      active: 0,
      params: {
        current: 1,
        size: 10,
        pages: 0,
        total:0,
        gradeId: "",
      },
      access: "",
      showFootHandle: false,
      list: [],
      payStatus: {},
    };
  },
  methods: {
    selectMenu(index, gradeId) {
      this.active = index;
      this.params.gradeId = gradeId;
      this.queryFn();
    },
    judge() {
      if (this.access === "access") {
        if (this.payStatus.residue > 0) {
          return true;
        } else {
          return false;
        }
      }
      return true;
    },
    jump(item) {
      let url = item.url;
      if (url.indexOf(".m3u8") === -1) {
        url = url.substring(0, url.lastIndexOf(".")) + ".m3u8";
      }
      this.$router.push({
        path: "live-play",
        query: item,
      });
    },
    loadmore() {
      this.params.size += 10;
      this.queryFn();
    },
    queryFn() {
      this.$http.fetchCamera(this.params).then((resp) => {
        let data = resp.data;
        this.params.current = data.current;
        this.params.size = data.size;
        this.params.pages = data.pages;
        this.params.total = data.total;
        this.list = data.records;
        this.$refs.camera_list.scrollTop = 0;
      });
    },
    getGradeList() {
      this.$http.getGradeList().then((resp) => {
        this.gradeList = resp.data;
        let list = resp.data;
        if (list.length > 0) {
          this.params.gradeId = list[0].id;
        }
        this.queryFn();
      });
    },
  },
  created() {
    this.access = this.$Cookies.get("loginType");
  },
  mounted() {
    this.getGradeList();
  },
};
</script>

<style scoped>
.camera-menus {
  width: 8.2rem;
  height: 100%;
  border-right: 1px solid rgba(238, 238, 238, 1);
  box-sizing: border-box;
  background: #ffffff;
}

.c-menu-item {
  padding: 15px 0;
  font-size: 1.6rem;
  color: #000000;
}

.c-menu-item.active {
  background-color: #36c12d;
  color: #ffffff;
}

.camera-list {
  background: #ffffff;
  width: calc(100% - 8.2rem);
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  font-size: 1.4rem;
}

.list-class {
  margin-bottom: 10px;
}

.list-item {
  color: rgba(117, 117, 117, 1);
  margin-top: 10px;
  flex-wrap: wrap;
  justify-content: space-between;
}

.item-img {
  position: relative;
  width: 124px;
  height: 100px;
  box-sizing: border-box;
  background: #eeeeee;
  margin-bottom: 5px;
  border: 1px solid #eeeeee;
}

.item-img::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: url(../../../../../static/img/vplay.png) no-repeat center/3rem
    3rem rgba(0, 0, 0, 0.4);
}
.loadMore {
  padding: 1rem 0;
  text-align: center;
}
</style>
